import { modal } from '@/widgets'
import { activeOrOpenFloatPane, openFloatPane, registerAppMenu } from '@/app'
import { listSelect } from '@/common/list-select'
import {
  type Entity,
  type EntityType,
  getEntity,
  entityTypeList,
  getEntityList,
  getEntityType
} from '../base'
import EntityTableView from './EntityTableView.vue'
import SelectEntityPane from './SelectEntityPane.vue'

export {
  type EntityTableCellValue,
  type EntityTableColumn,
  type EntityTableOptions,
  registerEntityTable
} from './base'
export { default as EntityTableView } from './EntityTableView.vue'

export function selectEntityByType<T extends Entity>(type: string, callback: (t: T) => void) {
  selectEntityIdByType(type, (id) => {
    callback(getEntity(type, id)!)
  })
}

export function selectEntityIdByType(type: string, callback: (e: string) => void) {
  const dialog = modal.create({
    component: SelectEntityPane,
    props: { type },
    events: {
      select(id: string | null) {
        dialog.destroy()
        if (id) {
          callback(id)
        }
      }
    }
  })
}

export function selectEntityType(callback: (t: EntityType) => void) {
  listSelect({
    title: '选择模型类型',
    icon: 'mas-icon-model',
    data: entityTypeList,
    getItemName(t) {
      return `${t.typeName}[${t.type}]`
    },
    getItemIcon: (t) => `mas-icon-${t.type}`,
    callback
  })
}

interface EntityTablePartialOptions<T extends Entity> {
  type: string
  name: string
  key?: string
  data: () => T[]
}

export function showEntityTablePartial<T extends Entity>(opts: EntityTablePartialOptions<T>) {
  const { type, name, key, data } = opts
  if (key) {
    activeOrOpenFloatPane({
      key,
      name,
      icon: `mas-icon-${type}`,
      component: EntityTableView,
      props: { type, data }
    })
  } else {
    openFloatPane({
      name,
      icon: `mas-icon-${type}`,
      component: EntityTableView,
      props: { type, data }
    })
  }
}

function _showEntityTable({ type, typeName }: EntityType) {
  const lst = getEntityList(type)
  if (!lst) {
    return
  }
  activeOrOpenFloatPane({
    key: `@@model-entity-table-${type}`,
    name: `表格 | ${typeName}(${lst.length})`,
    icon: `mas-icon-${type}`,
    component: EntityTableView,
    props: { type }
  })
}

export function showEntityTable(type: string) {
  const et = getEntityType(type)!
  if (!et) {
    return
  }
  _showEntityTable(et)
}

export function selectAndShowEntityTable() {
  selectEntityType((e) => _showEntityTable(e))
}

export function selectEntityTypeId(callback: (type: string, id: string) => void) {
  selectEntityType(({ type }) =>
    selectEntityIdByType(type, (id) => {
      callback(type, id)
    })
  )
}

export function selectEntity(callback: (type: string, e: Entity) => void) {
  selectEntityType(({ type }) => {
    selectEntityByType(type, (e) => callback(type, e))
  })
}

export function setupTable() {
  registerAppMenu({
    path: '模型/{mas-icon-model}查看模型',
    onClick: selectAndShowEntityTable
  })
  // registerAppMenu({
  //   path: '模型/测试选择模型',
  //   onClick: () =>
  //     selectEntity((type, e) => {
  //       console.log(type, e)
  //     })
  // })
}
